/* global App */

(function() {
    
    var ChartsView = {
        init: function() {
            this.load();
        },
        load: function() {
            var self = this;
            var url = $('#charts-data-url').val();

            $.ajax({
                url: url,
                type: 'post',
                dataType: 'json',
                success: function( res ) {
                    console.log(res);
                    self.members.render(res.charts.recent_members);
                    self.visitors.render(res.charts.recent_visitors);
                },
                error: function( xhr ) {
                    console.log(xhr.responseText);
                }
            });
        },
        members: {
            render: function( stats ) {

                var data = [];
                var ticks = [];

                var i = 1;
                for ( var key in stats ) {
                    var point = [i, stats[key]];
                    var tick = [i, key];
                    data.push(point);
                    ticks.push(tick);

                    i++;
                }
                console.log(data, ticks);

                var area = $("#flot-chart-members");

                if ( area.length == 0 ) {
                    return;
                }

                var plot = $.plot(area, [{
                        data: data,
                        label: "New Members"
                    }], {
                    series: {
                        lines: {
                            show: true,
                            lineWidth: 1,
                            fill: true,
                            fillColor: {
                                colors: [{
                                        opacity: 0.2
                                    }, {
                                        opacity: 0.1
                                    }]
                            }
                        },
                        points: {
                            show: true
                        },
                        shadowSize: 2
                    },
                    grid: {
                        hoverable: true,
                        clickable: true,
                        tickColor: "#f0f0f0",
                        borderWidth: 0
                    },
                    colors: ["#524982", "#89cb4e"],
                    xaxis: {
                        ticks: ticks,
                        tickDecimals: 0
                    },
                    yaxis: {
                        ticks: 5,
                        tickDecimals: 0
                    },
                    tooltip: true,
                    tooltipOpts: {
                        content: "%y.4 %s",
                        defaultTheme: false,
                        shifts: {
                            x: 0,
                            y: 20
                        }
                    }
                }
                );
            }
        },
        visitors: {
            render: function( stats ) {
                var data = [];
                var ticks = [];

                var i = 1;
                for ( var key in stats ) {
                    var point = [i, stats[key]];
                    var tick = [i, key];
                    data.push(point);
                    ticks.push(tick);

                    i++;
                }

                var area = $("#flot-chart-visitors");

                if ( area.length == 0 ) {
                    return;
                }

                var plot = $.plot(area, [{
                        data: data,
                        label: "New Visitors"
                    }], {
                    series: {
                        lines: {
                            show: true,
                            lineWidth: 1,
                            fill: true,
                            fillColor: {
                                colors: [{
                                        opacity: 0.2
                                    }, {
                                        opacity: 0.1
                                    }]
                            }
                        },
                        points: {
                            show: true
                        },
                        shadowSize: 2
                    },
                    grid: {
                        hoverable: true,
                        clickable: true,
                        tickColor: "#f0f0f0",
                        borderWidth: 0
                    },
                    colors: ["#524982", "#89cb4e"],
                    xaxis: {
                        ticks: ticks,
                        tickDecimals: 0
                    },
                    yaxis: {
                        ticks: 10,
                        tickDecimals: 0
                    },
                    tooltip: true,
                    tooltipOpts: {
                        content: "%y.4 %s",
                        defaultTheme: false,
                        shifts: {
                            x: 0,
                            y: 20
                        }
                    }
                }
                );
            }
        }
    };
    
    App.register("ChartsView", ChartsView );
    
})();

/**
 * Group Charts module
 * 
 * @returns {undefined}
 */
(function() {
    
    var GroupChartsView = {
        init: function() {
            this.setup();
        },

        setup: function() {
            var self = this;

            $("#group-charts .nav-pills li:first").addClass('active');
            $("#group-charts .tab-content .tab-pane:first").addClass('active');

            $('#group-charts a[data-toggle="pill"]').on('shown.bs.tab', function( e ) {
                $.sparkline_display_visible();
            });

            $("#group-chart-select").change(function() {
                var sel = $(this).val();

                if( !$(sel).hasClass('plotted') ) {
                    var data = JSON.parse( $(sel).text() );
                    var points = [];

                    for(var key in data) {
                        points.push({
                            label: key,
                            data: data[key]
                        });
                    }

                    $("#group-charts .tab-pane").addClass('hidden');
                    $(sel).html('').removeClass('hidden');

                    self.renderPieChart(sel, points);
                }

                else {
                    $("#group-charts .tab-pane").addClass('hidden');
                    $(sel).html('').removeClass('hidden');

                    self.renderPieChart(sel, $(sel).data('points'));
                }
            });

            setTimeout(function() {
                $("#group-chart-select").change();
            }, 1000 * 2);
        },

        renderPieChart: function( sel, data ) {
            var $sel = $(sel);

            $.plot($sel, data, {
                series: {
                    pie: {
                        combine: {
                            color: "#999",
                            threshold: 0.05
                        },
                        show: true
                    }
                },
                colors: ["#5c677c", "#594f8d", "#92cf5c", "#fb6b5b", "#5dcff3"],
                legend: {
                    show: true
                },
                grid: {
                    hoverable: true,
                    clickable: false
                },
                tooltip: true,
                tooltipOpts: {
                    content: "%s: %p.0%"
                }
            });

            $sel.addClass('plotted').data('points', data);

        }
    };
    
    App.register('GroupCharts', GroupChartsView );
})();
